/*
 * @Author: huangyingli
 * @Date: 2023-02-23 22:25:08
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-26 23:24:47
 * @Description:
 */
import { Button,message } from 'antd';
import { useNavigate } from 'react-router-dom';

import { ModalList, ModalPublish } from '../../api/modalManage';
import { useEffect, useState } from 'react';
import ComponentCard from '../../components/ComponentCard';
import style from './ModalManage.module.less';

export default function ModalManage() {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  const [messageApi, contextHolder] = message.useMessage();
  const [selectId, setSelectId] = useState([]);
  function onClick() {
    navigate('/modal-manage-handle');
  }
  useEffect(() => {
    ModalList().then(({ data }) => {
      setList(data.data);
    });
  }, []);

  function onPublish() {
    console.log('selected', selectId);
    ModalPublish({
      data: {
        modalIds: selectId,
      },
    }).then(() => {
      messageApi.open({
        type: 'success',
        content: '模板发布成功',
      });
    });
  }

  function onOffLine() {}
  return (
    <>
      {contextHolder}
      <div>
        <Button type='primary' onClick={onClick}>
          新增模板
        </Button>
        <Button type='primary' onClick={onPublish} danger>
          构建发布
        </Button>

        <Button type='primary' onClick={onOffLine} danger ghost>
          下线
        </Button>

        <div className={style.list}>
          {list.map((l) => (
            <ComponentCard
              name={l.name}
              key={l.id}
              modalId={l.id}
              showStatus
              isOnline={l.isOnline}
              onSelect={(toggle) => {
                if (toggle) {
                  setSelectId(selectId.concat(l.id));
                } else {
                  setSelectId(selectId.filter((s) => s !== l.id));
                }
              }}
            ></ComponentCard>
          ))}
        </div>
      </div>
    </>
  );
}
